<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2024/4/30
  Time: 11:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="../../static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
    <style>
        /* 设置表单样式 */
        .demo-reg-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border-radius: 5px;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        .layui-form-label {
            width: 80px;
            text-align: right;
        }

        .layui-input-inline {
            display: inline-block;
            width: calc(100% - 80px);
        }

        .layui-input-wrap {
            position: relative;
        }

        .layui-input-prefix {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }

        .layui-input {
            padding-left: 30px;
        }

        .layui-btn-fluid {
            width: 100%;
        }
        .ok{
            color: green;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <style>
        .demo-reg-container{width: 320px; margin: 21px auto 0;}
        .demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
    </style>
    <form class="layui-form" lay-filter="updatePasswordFilter">
        <div class="demo-reg-container">
            <div class="layui-form-item">
                <input type="hidden" name="id">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="account" id="account" value="" lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input" lay-affix="clear"  onblur="checkAccount()">
                    </div>
                    <span id="accountMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-inline">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="password" value="" lay-verify="required|Password" placeholder="原密码" autocomplete="off" class="layui-input" id="password" lay-affix="eye" onblur="checkPassword()">
                    </div>
                    <span id="passwordMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="newPassword" value="" lay-verify="required" placeholder="新密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye" onblur="checkNewPassword()">
                    </div>
                    <span id="newPasswordMsg"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="confirmPassword" id="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye" onblur="checkConfirmPassword()">
                    </div>
                    <span id="confirmPasswordMsg"></span>
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="submitUpdate">修改密码</button>
            </div>
        </div>
    </form>

    <script>
        function checkAccount () {
            var account = $('#account').val();
            var regex = /[a-zA-Z0-9_]{5,10}/;
            if (regex.test(account)) {
                $('#accountMsg').html('该账号格式正确');
                $('#accountMsg').removeClass();
                $('#accountMsg').addClass('ok');
            } else {
                $('#accountMsg').html('5-10位的字母、数字、下划线');
                $('#accountMsg').removeClass();
                $('#accountMsg').addClass('error');
            }
        };
        function checkPassword () {
            var password = $('#password').val();
            var regex = /^[\S]{6,16}$/;
            if (regex.test(password)) {
                $('#passwordMsg').html('该密码格式正确');
                $('#passwordMsg').removeClass();
                $('#passwordMsg').addClass('ok');
            } else {
                $('#passwordMsg').html('密码必须为 6 到 16 位的非空字符');
                $('#passwordMsg').removeClass();
                $('#passwordMsg').addClass('error');
            }
        };
        function checkNewPassword () {
            var newPassword = $('#reg-password').val();
            var regex = /^[\S]{6,16}$/;
            if (regex.test(newPassword)) {
                $('#newPasswordMsg').html('该密码格式正确');
                $('#newPasswordMsg').removeClass();
                $('#newPasswordMsg').addClass('ok');
            } else {
                $('#newPasswordMsg').html('密码必须为 6 到 16 位的非空字符');
                $('#newPasswordMsg').removeClass();
                $('#newPasswordMsg').addClass('error');
            }
        };
        function checkConfirmPassword () {
            var confirmPassword = $('#confirmPassword').val();
            var regex = /^[\S]{6,16}$/;
            if (regex.test(confirmPassword)) {
                $('#confirmPasswordMsg').html('该密码格式正确');
                $('#confirmPasswordMsg').removeClass();
                $('#confirmPasswordMsg').addClass('ok');
            } else {
                $('#confirmPasswordMsg').html('密码必须为 6 到 16 位的非空字符');
                $('#confirmPasswordMsg').removeClass();
                $('#confirmPasswordMsg').addClass('error');
            }
        };
        layui.use(function(){
            var $ = layui.$;
            var form = layui.form;

            // 自定义验证规则
            form.verify({
                // 确认密码
                confirmPassword: function(value, item){
                    var passwordValue = $('#reg-password').val();
                    if(value !== passwordValue){
                        return '两次密码输入不一致';
                    }
                },
                // 原密码与新密码不能一致
                Password: function(value, item){
                    var newPasswordValue = $('#reg-password').val();
                    if(value === newPasswordValue){
                        return '原密码与新密码不能一致';
                    }
                }
            });

            var queryString = window.location.search;
            var urlParams = new URLSearchParams(queryString);
            var id = urlParams.get("id");
            $.post(
                '/admin?method=selectAccount',
                {'id': id},
                function (result) {
                    if (result.code == 0) {
                        form.val('updatePasswordFilter', result.data);
                    }
                },
                'json'
            );
            form.on('submit(submitUpdate)',function (data) {
                var field = data.field;
                console.log(field);
                $.post(
                    '/admin?method=updatePassword',
                    field,
                    function (result) {
                        console.log(result);
                        if (result.code == 0) {
                            mylayer.okMsg(result.msg);
                            setInterval(function() {
                                //关闭弹出框
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                //刷新父页面
                                window.parent.location.reload();
                            }, 2000)
                        } else {
                            mylayer.errorMsg(result.msg);
                        }
                    },
                    'json'
                );
                return false;
            });
        });
    </script>

</body>
</html>
